<%--
  Created by IntelliJ IDEA.
  User: 86156
  Date: 2024/12/23
  Time: 9:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
     <script src="js/vue.js"></script>
     <script src="js/axios.min.js"></script>
</head>
<body>
    <div id="app">
         <%--<button @click="loadEmp()">加载所有员工信息</button>--%>
             <table width="600" border="1" cellpadding="0" cellspacing="0" align="center">
                 <tr>
                     <td>编号</td>
                     <td>姓名</td>
                     <td>工作</td>
                     <td>薪资</td>
                     <td>部门号</td>
                     <td>部门名称</td>
                     <td>操作</td>
                 </tr>
                 <tr v-for="e in emps">
                         <td>{{e.empId}}</td>
                         <td>{{e.empName}}</td>
                         <td>{{e.empJob}}</td>
                         <td>{{e.empSalary}}</td>
                         <td>{{e.did}}</td>
                         <%--<td><img v-bind:src="e.empHead width=50"/></td>--%>
                         <td>{{e.dept.deptName}}</td>
                         <td>删除</td>
                     </tr>

             </table>
    </div>

</body>
<script>
  let app=new Vue({
    el:"#app",
    data:{
         emps:[],
    },
      created(){
        this.loadEmp();
      },
    methods:{
      loadEmp(){
        axios.get("/emp/listjson").then(msg=>{
          this.emps=msg.data;
        })
      }

    }
  })
</script>
</html>
